<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>to-do-list by vue</title>
    <script src="./vue-2.5.13.js"></script>
    <style>
        .scroll-container {
          height: 200px; /* 滚动容器的高度 */
          overflow-y: auto;
        }
        </style>
  </head>
  <body>
    <div id="app">
      <template>
        <div class="scroll-container" ref="scrollContainer">
          <ul>
            <li v-for="(item, index) in items" :key="index">{{ item }}</li>
          </ul>
        </div>
        <button @click="startRolling" :disabled="isRolling">开始抽奖</button>
      </template>
    </div>

    <script type="text/javascript">
      // 初始化 Vue 实例
      var vm = new Vue({
        el: '#app',
        data() {
          return {
            items: ['奖品1', '奖品2', '奖品3', '奖品4', '奖品5'], // 奖项列表
            isRolling: false,
            timeout: null
          }
        },
        methods: {
            startRolling() {
      if (!this.isRolling) {
        this.isRolling = true;
        this.roll();
      }
    },
    roll() {
      const scrollContainer = this.$refs.scrollContainer;
      const scrollHeight = scrollContainer.scrollHeight - scrollContainer.clientHeight;
      const scrollStep = 50; // 滚动速度，可以根据需要调整

      scrollContainer.scrollTop += scrollStep;

      if (scrollContainer.scrollTop < scrollHeight) {
        this.timeout = setTimeout(this.roll, 50); // 这里的时间间隔也可以根据需要调整
      } else {
        // 停止滚动并选择获奖项目
        this.isRolling = false;
        clearTimeout(this.timeout);
        this.selectWinner();
      }
    },
    selectWinner() {
      // 在这里实现随机选择获奖项目的逻辑
      const randomIndex = Math.floor(Math.random() * this.items.length);
      alert(`恭喜你，获得了奖品：${this.items[randomIndex]}`);
    },
        }
      })
    </script>
  </body>
</html>
